<!--
 * @Author: 陈俊升 761723995@qq.com
 * @Date: 2023-12-12 11:14:35
 * @LastEditors: 陈俊升 761723995@qq.com
 * @LastEditTime: 2024-01-17 14:55:25
 * @FilePath: /hr_new_vue3/src/views/Management/Home/LeaveManagement/Certificate/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- 工作台-离职管理-接收任务-离职手续(办理人办理) -->
<template>
  <ConditionBox :margin-bottom="20">
    <template #left>
      <a-space>
        <div style="display: flex">
          <a-select :options="options" v-model="keyWold" />
          <a-input-search
            @press-enter="onSearch"
            @search="onSearch"
            v-model="keyWoldValue"
            placeholder="请输入"
          />
        </div>
        <a-input-search
          @press-enter="onSearch"
          @search="onSearch"
          v-model="phoneData"
          placeholder="输入手机号码搜索"
        />
        <a-button @click="reset">重置</a-button>
      </a-space>
    </template>
    <template #right>
      <a-button type="primary" @click="handleClick(null)">批量处理</a-button>
    </template>
  </ConditionBox>
  <TableTurn :tableData="getTableData" ref="tableRef" :args="args">
    <a-table-column :width="80">
      <template #title> 序号 </template>
      <template #cell="{ rowIndex }">
        {{ rowIndex + 1 }}
      </template>
    </a-table-column>
    <a-table-column :width="150" title="离职人员姓名" data-index="userName">
    </a-table-column>
    <a-table-column
      :width="300"
      title="办理事项"
      data-index="handlerMatters"
      :ellipsis="true"
      :tooltip="{
        position: 'top'
      }"
    >
    </a-table-column>
    <a-table-column :width="150" title="办理状态" data-index="handleStatus">
      <template #cell="{ record }">
        <span
          :class="{
            'text-[#00b42a]': record.handleStatus === '已完成',
            'text-[#ccc]': record.handleStatus === '待确认',
            'text-blue': record.handleStatus === '处理中'
          }"
          >{{ record.handleStatus }}</span
        >
      </template>
    </a-table-column>
    <a-table-column :width="150" title="操作" data-index="">
      <template #cell="{ record }">
        <!-- <a-button
              type="text"
              v-if="record.handleStatus === '已完成'"
              @click="handleClick(record, 2)"
              >查看</a-button
            > -->
        <a-popconfirm content="确认处理该条数据吗?" @ok="handleClick(record)">
          <a-button type="text">处理</a-button>
        </a-popconfirm>
      </template>
    </a-table-column>
  </TableTurn>
</template>

<script lang="tsx" setup>
import { PutEntryProcedure } from '@/apis/management/human/humanChange/entry/index';
import { GetHandlerList } from '@/apis/management/home/entryManagement';
import { cloneDeep } from 'lodash';
import { Message, Modal } from '@arco-design/web-vue';

const router = useRouter();

const title = '接收任务';

const userId = +localStorage.getItem('userId');

// 模糊查询参数
const options = reactive([
  { label: '姓名', value: 'name' },
  { label: '职位', value: 'positionName' }
]);
// 模糊类型
const keyWold = ref('name');
// 模糊查询值
const keyWoldValue = ref('');

const phoneData = ref('');

let tableRef = ref();

const selectedListData = computed(() => tableRef.value.selectedListData);
const selectedList = computed(() => tableRef.value.selectedList);

// 选择器配置
const args = {
  rowSelection: {
    type: 'checkbox',
    showCheckedAll: true,
    onlyCurrent: false
  }
};

const getTableData = async (pageData?: any) => {
  try {
    let res = await GetHandlerList({
      // keyWold: keyWold.value,
      // keyWoldValue: keyWoldValue.value,
      // phoneData: phoneData.value,
      ...pageData,
      id: userId,
      type: 3
    });

    res.content = res.content.map((el: any) => {
      el.handleStatus = handleTableStatus(el?.children);
      el.details = cloneDeep(el?.children);
      el.handlerMatters = handleMatters(el?.details);
      delete el.children;
      return el;
    });
    console.log('====================================');
    console.log(res.content);
    console.log('====================================');
    return Promise.resolve(res);
  } catch (error: unknown) {
    console.log(error);
  }
};

// 处理办理事项
const handleMatters = (arr: []) => {
  let temp = [];
  arr.forEach((item: any) => {
    if (item.handlerUser === userId) {
      temp.push(item.handlerMatters);
    }
  });
  return temp.join(';');
};

// 处理表格数据的状态
const handleTableStatus = (arr: []) => {
  let unFinishedCount = 0; // 未完成的数量
  let finishedCount = 0; // 已完成的数量
  let totalCount = 0; // 自己所需办理事件的总数
  // arr.forEach((el: any) => {
  //   if (el.handlerUser === userId) {
  //     if (el.handlerEnter === 1) {
  //       unFinishedCount++;
  //     } else if (el.handlerEnter === 2) {
  //       finishedCount++;
  //     }
  //   }
  // });

  arr.forEach((el: any) => {
    if (el.handlerUser === userId) {
      totalCount++;
      if (el.handlerEnter === 2) {
        unFinishedCount++;
      } else if (el.handlerEnter === 1) {
        finishedCount++;
      }
    }
  });
  if (unFinishedCount === totalCount) {
    return '待确认';
  } else if (finishedCount === totalCount) {
    return '已完成';
  } else return '处理中';
};

// 处理点击
const handleClick = async (record: any | null) => {
  try {
    // // 单个处理
    if (record) {
      record.details = handleData(record.details);
      let temp = cloneDeep(record);
      temp.children = temp.details;
      await PutEntryProcedure(temp);
      refresh();
    }
    // 批量处理
    else {
      if (selectedList.value.length === 0) {
        Message.error('请先选择数据');
        return;
      }
      Modal.confirm({
        title: '批量确认',
        content: <>是否确认处理选中的数据?</>,
        onOk: async () => {
          for (let i of selectedListData.value) {
            i.details = handleData(i.details);
            let temp = cloneDeep(i);
            temp.children = temp.details;
            await PutEntryProcedure(temp);
          }
          tableRef.value.selectedList = [];
          refresh();
        }
      });
    }
  } catch (error: unknown) {
    console.log(error);
  }
};

const handleData = (details: []) => {
  details = details.map((el: any) => {
    if (el.handlerUser === userId) {
      el.handlerEnter = 1;
    }
    return el;
  });
  return details;
};

const onSearch = () => {
  refresh();
};

// 重置数据
const reset = () => {
  keyWold.value = 'name';
  keyWoldValue.value = '';
  phoneData.value = '';
  refresh();
};

// 刷新列表
const refresh = (page?: any) => {
  tableRef.value.loadData(page);
};
</script>

<style lang="less" scoped></style>
